<script lang="ts">
export default {
  name: "PieHome"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, watch } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
// import { useAppStoreHook } from "/@/store/modules/app";
import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

const props = defineProps({
  echartData: {
    type: Array,
    default: () => []
  }
});
// const pureApp = useAppStoreHook();

const pieHome = ref<HTMLElement | null>(null) as any;
const chart = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

function initechartInstance(data) {
  const echartDom = chart.value;
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    tooltip: {
      trigger: "item"
    },
    // color: ["#00e6ad", "#59a0ff", "#ffc500"],
    color: ["#BAE637", "#91D5FF"],
    graphic: [
      //为环形图中间添加文字
      {
        type: "text",
        left: "center",
        top: "45%",
        style: {
          text: data.sum,
          textAlign: "center",
          fill: "#0c045d",
          fontSize: 24
        }
      },
      {
        type: "text",
        left: "center",
        top: "55%",
        style: {
          text: "公司合计预算总额",
          textAlign: "center",
          fill: "#999999",
          fontSize: 14
        }
      }
    ],

    series: [
      {
        name: "",
        type: "pie",
        label: {
          formatter: "{name|{b}}{time|{c}元 } ",

          rich: {
            time: {
              fontSize: 12
            }
          }
        },
        radius: ["42%", "60%"],
        data: data.arr,

        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  });
}

// onBeforeMount(() => {
//   nextTick(() => {
//     const data = props.echartData.map(item => {
//       item.value = item.stageTotal;
//       item.name = projectStage.get(item.stageStatus);
//     });
//     initechartInstance(data);
//   });
// });

watch(
  () => props.echartData,
  newVal => {
    if (newVal.length) {
      nextTick(() => {
        const arr = [];
        arr.push({ name: "已投入总额", value: newVal[0].inputTotal });
        arr.push({
          name: "未投入",
          value: newVal[0].budgetSumAmount - newVal[0].inputTotal
        });
        // newVal[0].month1 !== 0 &&
        //   arr.push({ name: "一月", value: newVal[0].month1 });
        // newVal[0].month2 !== 0 &&
        //   arr.push({ name: "二月", value: newVal[0].month2 });
        // newVal[0].month3 !== 0 &&
        //   arr.push({ name: "三月", value: newVal[0].month3 });
        // newVal[0].month4 !== 0 &&
        //   arr.push({ name: "四月", value: newVal[0].month4 });
        // newVal[0].month5 !== 0 &&
        //   arr.push({ name: "五月", value: newVal[0].month5 });
        // newVal[0].month6 !== 0 &&
        //   arr.push({ name: "六月", value: newVal[0].month6 });
        // newVal[0].month7 !== 0 &&
        //   arr.push({ name: "七月", value: newVal[0].month7 });
        // newVal[0].month8 !== 0 &&
        //   arr.push({ name: "八月", value: newVal[0].month8 });
        // newVal[0].month9 !== 0 &&
        //   arr.push({ name: "九月", value: newVal[0].month9 });
        // newVal[0].month10 !== 0 &&
        //   arr.push({ name: "十月", value: newVal[0].month10 });
        // newVal[0].month11 !== 0 &&
        //   arr.push({ name: "十一月", value: newVal[0].month11 });
        // newVal[0].month12 !== 0 &&
        //   arr.push({ name: "十二月", value: newVal[0].month12 });
        initechartInstance({ sum: newVal[0].budgetSumAmount, arr });
      });
    }
  }
);

onMounted(() => {
  //   echartData;
  nextTick(() => {
    addResizeListener(pieHome.value, resetRender);
  });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(pieHome.value, resetRender);
});
</script>

<template>
  <div ref="pieHome">
    <div ref="chart" class="pieHome"></div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  color: $defaultColor;
  margin: 10px 0;
  height: 24px;
}
.pieHome {
  width: 100%;
  height: 300px;
}
</style>
